<template>
  <div class="nuonuoContract">
    <el-dialog
      v-model="visible"
      :title="
        relatedParams.businessName
          ? '选择合同(' + relatedParams.businessName + ')'
          : '选择合同'
      "
      :before-close="cancel"
      width="1200"
    >
      <el-select
        class="mb-10px px-10px w-1/2"
        v-model="pageParams.templateType"
        placeholder="选择合同类别"
        @change="getContract"
      >
        <el-option
          v-for="(dict, index) in nuonuo_contract_type"
          :key="index"
          :label="dict.label"
          :value="dict.value"
        ></el-option>
      </el-select>
      <div>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          label-width="120px"
          status-icon
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="签署方企业税号" prop="customerCreditCode">
                {{ formData.customerCreditCode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签署方名字" prop="customerName">
                {{ formData.customerName }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签署方手机号" prop="linkPhone">
                <el-input
                  v-model="formData.linkPhone"
                  placeholder="填写签署方手机号"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-if="base64">
        <iframe :src="base64" class="w-full min-h-59vh"></iframe>
      </div>
      <el-empty v-else description="暂无合同" />
      <template #footer>
        <div>
          <el-button @click="cancel">取消</el-button>
          <el-button
            type="primary"
            @click="finished"
            v-loading="loading"
            :disabled="!contractData.contractFile"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="NuonuoContract">
import {
  addContractTemplate, //创建合同模板接口
  contractInitiationMethod //合同发起接口
} from '@/api/nuonuoContract/index'
import { getCurrentInstance } from 'vue'
import { useDict } from '@/utils/dict'
import { validatePhoneNot } from '@/utils/validate'

const base64Head = 'data:application/pdf;base64,'
const { proxy } = getCurrentInstance()
const { nuonuo_contract_status, nuonuo_contract_type } = useDict(
  'nuonuo_contract_status', //合同状态
  'nuonuo_contract_type' //合同类型
)
const props = defineProps({
  relatedParams: {
    type: Object,
    requeired: true,
    default: () => {
      return { visible: false }
    }
  }
})
const formData = ref({})
const formRules = ref({
  linkPhone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    },
    {
      validator: validatePhoneNot
    }
  ]
})
const data = reactive({
  loading: false,
  pageParams: {
    templateType: '',
    orderId: props.relatedParams.id
  },
  contractData: {},
  base64: ''
})
const { loading, pageParams, contractData, base64 } = toRefs(data)
const visible = computed(() => props.relatedParams.visible) // 显示
watch(
  () => props.relatedParams.visible,
  () => {
    if (props.relatedParams.id && props.relatedParams.visible) {
      pageParams.value.orderId = props.relatedParams.id
      formData.value = { ...props.relatedParams.params }
      console.log('params.value = =>', formData.value)
    }
  },
  {
    immediate: true
  }
)
async function getContract() {
  const response = await addContractTemplate(pageParams.value)
  if (response.code === 200) {
    // console.log('诺诺合同==>', response)
    contractData.value = response.data
    base64.value = base64Head + contractData.value.contractFile
    // console.log('base64.value==>', base64.value)
  }
}

const emit = defineEmits(['closeDialog', 'clickOK'])
function cancel() {
  emit('closeDialog')
  // 重置数据
}

// 确认 发起合同
async function finished() {
  loading.value = true
  let data = {
    orderId: pageParams.value.orderId,
    contractFile: contractData.value.contractFile,
    receiverNumber: formData.value.customerCreditCode, //签署方企业税号
    receiverName: formData.value.customerName, //签署方名字
    receiverPhone: formData.value.linkPhone //签署方手机号
  }
  proxy.$refs.formRef.validate(async (valid, msg) => {
    if (valid) {
      proxy.$modal
        .confirm('是否确认发起合同?')
        .then(async function () {
          const response = await contractInitiationMethod(data)
          loading.value = false
          if (response.code === 200) {
            proxy.$modal.msgSuccess('发起合同成功')
            emit('clickOK')
            cancel()
            // console.log('诺诺合同==>', response)
          }
        })
        .catch(() => {
          loading.value = false
        })
    } else {
      loading.value = false
    }
  })
}
</script>

<style scoped lang="scss"></style>
